<template>
	<coreshop-page title="接龙" mode="left" bgColor="#D33123" titleColor="#fff" showLoginModalDom needLoadingPage
		:loadingPage="loading">
		<view class="layout-solitaire-box">
			<view class="config-box">
				<image class="img" :src="shopConfigStore?.config?.shopLogo"></image>
				<view class="store-box">
					<view class="name">{{ shopConfigStore?.config?.shopName }}</view>
					<view class="tit">{{ shopConfigStore?.config?.shareTitle }}</view>
				</view>
				<view class="btn-phone" @click="hanldePhoneCallStore">
					<view class="tit">联系商家</view>
				</view>
			</view>

			<view class="solitaire-list" v-if="state.list.length > 0">
				<view class="item-box" v-for="item in state.list" :key="item.id"
					@click="handleBuyNowSolitaire(item.id)">
					<coreshop-goods-card type="horizontal" imgHeight="200rpx" imgWidth="200rpx"
						:goodsData="hanldeCombinationGoodsData(item)">
						<template #goodPrice>
							<view class="goods-box">
								<view class="time">截止时间：{{ timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
								<view class="tag-box">
									<view class="tag count" v-if="item.minDeliveryPrice > 0">{{ item.minDeliveryPrice
                                        }}元起送
									</view>
									<view class="tag nums" v-if="item.startBuyPrice > 0">{{ item.startBuyPrice }}元起购
									</view>
								</view>
							</view>
						</template>
					</coreshop-goods-card>
					<view class="btn-box">
						<view class="title">正在接龙中...</view>
						<view class="btn">立即接龙</view>
					</view>
				</view>
				<view class="no-data" v-if="state.noData">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无拼团商品"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { handleRouteNavigateTo } from '@/core/utils';
	import { querySolitaireList } from '@/core/api';
	import { EmptyEnum } from '@/core/enum';
	import { useShopConfigStore, useLoginStore } from '@/core/store';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { useLoadingFn } from '@/core/hooks';

	/** 获取项目配置 */
	const shopConfigStore = useShopConfigStore();

	/** 登录store */
	const _useLoginStore = useLoginStore();

	const state = reactive<{
		page : number;
		limit : number;
		totalPages : number;
		list : Array<any>;
		noData : boolean;
	}>({
		page: 1,
		limit: 10,
		totalPages: 1,
		list: [],
		noData: false,
	});

	const loading = ref(true);
	const handleQuerytSolitaireList = useLoadingFn(getSolitaireList, loading);

	onLoad(() => {
		handleQuerytSolitaireList();
	});

	onPullDownRefresh(async () => {
		state.list = [];
		await handleQuerytSolitaireList();
		uni.stopPullDownRefresh();
	});


	/** 获取接龙列表 */
	async function getSolitaireList() {

		const activityList = await querySolitaireList({
			page: state.page,
			limit: state.limit,
		});

		if (state.limit > activityList.data?.length || activityList.data?.length == 0) {
			state.noData = true;
		}
		if (activityList.data?.length > 0) {
			state.list = state.list.concat(activityList.data);
		}
	}

	// 组合商品数据传入组件
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			image: item.thumbnail,
			name: item.title,
			brief: item.description,
		}
	}

	onReachBottom(() => {
		if (!state.noData) {
			state.page++;
			getSolitaireList();
		}
	});

	/** 联系商家 */
	const hanldePhoneCallStore = () => {
		if (shopConfigStore?.config?.shopMobile) {
			uni.makePhoneCall({
				phoneNumber: shopConfigStore?.config?.shopMobile
			});
		}
	}

	/** 立即接龙 */
	const handleBuyNowSolitaire = (id : number) => {
		_useLoginStore.checkLogin(() => {
			handleRouteNavigateTo(`/pages/subpackage/activity/solitaire/detail/detail?id=${id}`)
		})
	}
</script>
<style lang="scss" scoped>
	@import './list.scss';
</style>